<template>
<div class="bgcolor">
    <div class="list" v-for="(item,index) in allorders" :key="index">
        <div class="list-left">
            <div class="head-portrait">
                <div class="portrait">
                    <img class="portrait-img" style="width:100%;height:100%" :src="item.avatar" alt="">
                </div>
            </div>
            <div class="partner-information">
                <div class="name">
                    <span class="partner-name">{{item.name}}</span>
                </div>
                <div class="partner-partner">
                    <span class="partners">他的堂主</span>
                    <span class="partners-number">{{item.subPartnersCount}}</span>
                </div>
            </div>
        </div>
        <div class="list-right">
            <div class="list-right-content">
                <div class="bring-integral">
                    <span class="bring-integral-word">为他带来美豆:</span>
                    <span class="bring-integral-number">{{item.subIntegral}}</span>
                </div>
                <div class="bring-integral">
                    <span class="bring-integral-word">为我带来美豆:</span>
                    <span class="bring-integral-number">{{item.integral}}</span>
                </div>
                <div class="sales-amount">
                    <span class="sales-amount-word">本月销售金额:</span>
                    <span class="sales-amount-number">{{item.salesAmount}}</span>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
export default {
    data(){
        return{
            name:"啊哈哈",
        }
    },
    props:{
        allorders:{
            type:Array,
        }
    },

}
</script>
<style scoped>
.bgcolor{
    background-color: #efeff4;
    position: absolute;
    width: 100%;
    height: 100%;
}
.list{
    display: flex;
    padding: 0rpx 24rpx 0rpx 24rpx;
    border-bottom: 2rpx solid #dfdfdf;
}
.list-left{
    flex: 2;
    height: 180rpx;
    display: flex;
}
.head-portrait{
    flex: 2;
    display: flex;
    /* justify-content:center; */
    align-items: center;
    text-align: center;
}
.portrait{
    width: 80rpx;
    height: 80rpx;
}
.portrait-img{
    border-radius: 100%;
}
.partner-information{
    flex: 3;
    margin-top: 50rpx;
}
.name{
    width: 100%;
    display: flex;
    align-items: center;           
}
.partner-name{
    font-size: 28rpx;
}
.partner-partner{
    width: 100%;
    display: flex;               
    align-items: center; 
}
.partners{
    font-size: 24rpx;
    color: #ababab;
    float: left;
}
.partners-number{
    font-size: 24rpx;
    color: #e38a8a;
    float: left;
}
.list-right{
    flex: 3;
    height: 180rpx;
    display: flex;
}
.list-right-content{
    flex: 1;
    margin-top:30rpx;
}
.sales-amount{
    width: 100%;
    display: flex;
    justify-content:flex-end;
    align-items: center;
    text-align: center;
}
.sales-amount-word{
    font-size: 28rpx;
    color: #ababab;
}
.sales-amount-number{
    font-size: 28rpx;
    color: #e38a8a;
    margin-left: 15rpx;
}
.bring-integral{
    width: 100%;
    display: flex;
    justify-content:flex-end;
    align-items: center;
    text-align: center;
}
.bring-integral-word{
    font-size: 28rpx;
    color: #ababab;
}
.bring-integral-number{
    font-size: 28rpx;
    color: #e38a8a;
    margin-left: 15rpx;
}
</style>
